<!--
 * @Description: 后台布局
 * @Author bianpengfei
 * @create 2021/5/8 22:34
 -->
<template>
  <div class="g-app__container">
    <!--普通后台统一样式布局-->
    <template v-if="_layout == 'default'">
      <div class="g-app__body g-layout-default g-app__body--horizontal">
        <app-menu class="g-app__body-left"></app-menu>
        <div class="g-app__body-right">
          <app-header></app-header>
          <app-nav></app-nav>
          <app-view></app-view>
        </div>
      </div>
    </template>

    <!--曼荼罗后台统一样式布局-->
    <template v-else-if="_layout == 'mandala'">
      <div class="g-layout-mandala">
        <app-header></app-header>
        <div class="g-layout-mandala--body">
          <app-menu class="mandala--body-lt"></app-menu>
          <div class="mandala--body-rt">
            <app-nav></app-nav>
            <app-view></app-view>
          </div>
        </div>
      </div>
    </template>

    <!--水平布局-->
    <template v-else-if="_layout == 'horizontal'">
      <div class="g-app__body g-app__body--horizontal">
        <app-menu class="g-app__body-left"></app-menu>
        <div class="g-app__body-right">
          <app-header></app-header>
          <app-nav></app-nav>
          <app-view></app-view>
        </div>
      </div>
    </template>

    <!--垂直布局-->
    <template v-else-if="_layout == 'vertical'">
      <div class="g-app__body">
        <app-header></app-header>
        <app-nav></app-nav>
        <app-view></app-view>
      </div>
    </template>

    <!--垂直布局 + 水平布局-->
    <template v-else-if="_layout == 'horizontal-vertical'">
      <div class="g-app__body g-app__body--horizontal">
        <app-menu class="g-app__body-left"></app-menu>
        <div class="g-app__body-right">
          <app-header></app-header>
          <app-nav></app-nav>
          <app-view></app-view>
        </div>
      </div>
    </template>

    <!--其他初始化-->
    <template>
      <ant-loading></ant-loading>
      <app-backtop></app-backtop>
      <app-setting></app-setting>
      <intor></intor>
    </template>
  </div>
</template>

<script>
import { sync, get } from 'vuex-pathify'
import AppMenu from './app-menu/'
import AppHeader from './app-header/'
import AppNav from './app-tags-nav/'
import AppView from './app-view/'
import AppBacktop from './app-backtop/'
import AntLoading from './ant-loading'
import AppSetting from './app-setting/'
import Intor from './components/intor'

export default {
  name: 'Index',
  components: {
    AppMenu,
    AppHeader,
    AppNav,
    AppView,
    AppBacktop,
    AntLoading,
    AppSetting,
    Intor
  },
  computed: {
    _menuIsCollapse: sync('app/menuIsCollapse'),
    _menuShow: get('app/menuShow'),
    _navShow: get('app/navShow'),
    _layout: get('app/layout')
  }
}
</script>

<style lang="scss">
@import './style/layout';
@import './style/layout-default';
@import './style/layout-mandala';
@import './style/theme-white.scss';
@import './style/theme-black.scss';
@import './style/theme-black-and-white';
@import './style/week-mode';
</style>
